<template>
  <div>
    <el-table stripe :data="tableData" style="width: 100%">
      <el-table-column prop="hfTime"  label="回访日期" width="180" header-align="center" align="center"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180" header-align="center" align="center"> </el-table-column>
      <el-table-column prop="address" label="地址" header-align="center" align="center"> </el-table-column>
      <el-table-column prop="formulatePlan" label="回访计划" header-align="center" align="center"> </el-table-column>
      <el-table-column label="制定计划" header-align="center" align="center">
        <el-button type="info" @click="handleAdd"
          >制定计划</el-button
        ></el-table-column
      >
    </el-table>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <!-- 用户的表单信息 -->
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="安排日期" prop="time">
          <el-date-picker
            v-model="form.time"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker
        ></el-form-item>
        <el-form-item label="回访计划" prop="formulatePlan" style="width: 400px">
          <el-input v-model="form.formulatePlan" placeholder="请输入回访计划" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" ></el-input></el-form-item>
      </el-form>
      <!-- <span>这是一段信息</span> -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {GetHfPlanHfPlan , getHfPlanSaveHfPlan} from "@/utils/data"
export default {
  name: "FollowUpPlan",
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      form: {
        time: "", //日期
        formulatePlan:""
      },
    };
  },
  created() {
    this.getTableData()
  },
  methods: {
    getTableData(){
      GetHfPlanHfPlan({
        "id":1
      }).then(res=>{
        console.log(res.state)
        if(res.state===200){
          res.data.hfTime = res.data.hfTime.slice(0,10)
          this.tableData.push(res.data)
          console.log(res.data)
        }
      }).catch(err=>{
        console.log(err)
      })
    },
    open() {
      this.$prompt("请输入回访时间", "请安排时间", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "你的邮箱是: ",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    handleAdd() {
      this.modalType = 0;
      this.dialogVisible = true;
    },
    // 弹窗关闭的时候触发
    handleClose() {
      console.log(this.form);
      this.$refs.form.resetFields();
      this.dialogVisible = false;
    },
    cancel() {
      this.handleClose();
    },
    submit() {
      // console.log(this.form.birth ? this.form.birth : "9999");
      getHfPlanSaveHfPlan({
        "id":1,
        "hfTime":this.form.time,
        "formulatePlan":this.form.formulatePlan
      }).then(res=>{
        console.log(res)
        if (res.state===200){
          this.$message({
            type: "success",
            message: "回访计划制定成功",
            duration: 1500,
            onClose: () => {
              this.dialogVisible = false;
              this.getTableData()
            }
          });
        }else{
          this.$message({
            type: "error",
            message: "回访计划制定失败",
          });
        }
      }).catch(err=>{
        console.log(err)
      })
    },
  },
};
</script>

<style>
</style>
